<template>
    <div class="column-header" style="display:flex;align-items: center;justify-content: center;">
        <span class="title">{{ label }}</span>
        <el-popover placement="bottom" trigger="click" ref="tableHeadPopover" @show="funnelPopShowEvent" class="popover" style="margin-left:5px;">
            <svg-icon name="funnel-1" color="blue" width="18px" height="20px" slot="reference" :color="bindData === '' ? '#acaeb3' : '#4040ff'" class="svgIcon"></svg-icon>
            <div class="popover-content">
                <div class="popover-content-head">
                    <!-- 下拉选择 -->
                    <template v-if="type === 'select'">
                        <el-select v-model="filterValueTemp" size="mini" :placeholder="'请选择' + label">
                            <el-option v-for="item,index in alternativeOption" :label="item" :value="item" :key="index"></el-option>
                        </el-select>
                    </template>
                    <!-- input输入框 -->
                    <template v-if="type === 'input'">
                        <el-input v-model="filterValueTemp" size="mini" :placeholder="'请输入' + label"></el-input>
                    </template>
                    <!-- 日期选择 -->
                    <template v-if="type === 'date'">
                        <el-date-picker v-model="filterValueTemp" type="date" size="mini" value-format="yyyy-MM-dd" :editable="false" placeholder="选择日期" style="width:160px;"></el-date-picker>
                    </template>
                    <!-- 单选框组 -->
                    <template v-if="type === 'radio'">
                        <el-radio v-model="filterValueTemp" v-for="e,i in alternativeOption" :key="i" :label="i">{{ e }}</el-radio>
                    </template>
                    <!-- 下拉选择可搜索 -->
                    <template v-if="type === 'selectAndSearch'">
                        <el-select v-model="filterValueTemp" filterable size="mini" :placeholder="'请选择' + label">
                            <el-option v-for="item,index in alternativeOption" :label="item" :value="item" :key="index"></el-option>
                        </el-select>
                    </template>
                </div>
                <div class="popover-content-options" style="text-align:right;margin-top:20px;">
                    <el-button size="mini" @click="tableHeadClearBtn">清空</el-button>
                    <el-button type="primary" size="mini" @click="tableHeadConfirmBtn">确定</el-button>
                </div>
            </div>
        </el-popover>
    </div>
</template>

<script>
import SvgIcon from "@/components/SvgIcon.vue";
export default {
    name:"tableHeadFilter",
    components:{
        SvgIcon
    },
    props:{
        label:{
            type:String,  //显示列名称
            default:"label",
            require:false
        },
        type:{
            type:String, //类型: select | date | input ...
            default:'',
            require:true
        },
        bindData:{
            type:String | Number,  //父组件的搜索值
            default:'',
            require:false
        },
        alternativeOption:{
            type:Array,  //当筛选为select | radio 时,其渲染的备选项数组alternativeOption
            default:() => new Array(),
            require:false
        },
        filterField:{
            type:String,  //对应筛选的搜索的key,应与父组件搜索过滤bindData的key保持一致
            default:'',
            require:false
        }
    },
    data(){
        return {
            filterValueTemp:""
        }
    },
    methods:{
        funnelPopShowEvent(){
            const tableHeadPopover = this.$refs.tableHeadPopover;
            tableHeadPopover.doShow();
            this.filterValueTemp = this.bindData;
        },
        tableHeadClearBtn(){
            const tableHeadPopover = this.$refs.tableHeadPopover;
            this.selectedValue = "";
            const parameters = {
                state:"clear",
                filterField:this.filterField,
                selectedValue:this.filterValueTemp
            }
            this.$emit("change",parameters);
            tableHeadPopover.doClose();
        },
        tableHeadConfirmBtn(){
            const tableHeadPopover = this.$refs.tableHeadPopover;
            const parameters = {
                state:"confirm",
                filterField:this.filterField,
                selectedValue:this.filterValueTemp
            }
            this.$emit("change",parameters);
            tableHeadPopover.doClose();
        }
    }
}
</script>

<style lang='scss' scoped>
.svgIcon{
    cursor: pointer;
}
</style>